<template>
	<form class="layui-form searchGroup" @submit="submit" v-if="list.length > 0">
		
		
	
		<div class="layui-form-item">
			
			<block v-for="( item , index) in list" :key="index">
				
				<!-- 日期类型 -->
				<div class="layui-inline" v-if="item.type == 'date' || item.type == 'createTime' || item.type == 'updateTime'">
					<label class="layui-form-label">{{item.title}}</label>
					<div class="layui-input-inline">
						<datepicker title="" :type="item.dateType?item.dateType:'range'" @confirm="confirmDate" :showIcon="false" :name="item.name" :value="myConditions[item.name]" :endName="item.endName" :endValue="myConditions[item.endName]"></datepicker>
					</div>
				</div>
				
				
				<!-- 选项类型 -->
				<div class="layui-inline" v-else-if="item.type == 'options' || item.type == 'boolean'">
					<label class="layui-form-label">{{item.title}}</label>
					<div class="layui-input-inline">
						<singleSelect title="" :name="item.name" :data-name="item.name" :value="myConditions[item.name]" :list="item.list" placeholder="输入关键字检索" @change="selectChange($event,item.name)"></singleSelect>
					</div>
				</div>
				
				<!-- 普通文本类型 -->
				<div class="layui-inline" v-else>
					<label class="layui-form-label">{{item.title}}</label>
					<div class="layui-input-inline">
						<input type="text" :name="item.name" class="layui-input" :data-name="item.name" :value="myConditions[item.name]" @input="inputCondition">
					</div>
				</div>
				
			</block>
			
			
			<div class="layui-inline inline-btn">
				<div class="layui-input-inline">
					<button class="layui-btn searchBtn" form-type="submit">搜索</button>
				</div>
			</div>
			
		</div>
	
	</form>
</template>

<script>
	export default {
		name: "conditions",
		props: {
			list : {
				type : Array ,
				default : function(e){
					return [] ;
				}
			},
			conditions : {
				type : Object ,
				default : function(e){
					return {} ;
				} 
			}
		},
		
		created() {
			for(var key in this.conditions){
				this.myConditions[key] = this.conditions[key] ;
			}
		},
		
		mounted() {
			document.onkeydown = function(e){
				e = e || e.event ;
				var keyCode = e.keyCode ;
				if(keyCode == 13){
					document.getElementsByClassName("searchBtn")[0].click();
				}
			}
		},
		
		watch:{
			conditions:function(e){
				for(var key in this.conditions){
					this.myConditions[key] = this.conditions[key] ;
				}
			},
		},
		
		data() {
			return {
				myConditions:{
					
				}
			};
		},
		
		methods:{
			
			inputCondition:function(e){
				var key = e.currentTarget.dataset.name ;
				this.myConditions[key] = e.detail.value ;
				this.$emit("input" , this.myConditions);
			},
			
			selectChange:function(e , key){
				this.myConditions[key] = e.value ;
				this.$emit("input" , this.myConditions) ;
			},
			confirmDate:function(e){
				console.log(e);
				
			},
			
			submit:function(e){
				var conditions = this.conditions ;
				var data = e.target.value ;
				for(var key in data){
					conditions[key] = data[key] ;
				}
				this.$emit("submit" , conditions );
			}
		}
	}
</script>


